<template>
  <dv-border-box-7 id="center-row-up-content">
    <div class="right-content-tittle">车间生产</div>

    <!-- <div id="firstRightLeftGauge"></div> -->

    <div id="firstRightCenterTable">
      <div class="firstRightCenterTableRow">
        订单号 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">
          {{ OrderData.code }}
        </div>
      </div>
      <div class="firstRightCenterTableRow">
        订单名称 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">
          {{ OrderData.name }}
        </div>
      </div>
      <div class="firstRightCenterTableRow">
        计划数量 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">
          {{ OrderData.planQty }}
        </div>
      </div>
      <div class="firstRightCenterTableRow">
        在制品数量 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">
          {{ OrderData.workingQty }}
        </div>
      </div>
      <div class="firstRightCenterTableRow">
        计划生产时间 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">{{ OrderData.createdTime }}</div>
      </div>
      <div class="firstRightCenterTableRow">
        最近加工时间 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">{{ OrderData.updatedTime }}</div>
      </div>
      <!-- <div class="firstRightCenterTableRow">
        OK数量 :&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">{{ OrderData.okQty }}</div>
      </div>
      <div class="firstRightCenterTableRow">
        NG数量:&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="firstRightCenterTableRow-2">{{ OrderData.ngQty }}</div>
      </div> -->
    </div>

    <div id="firstRightRightNightingaleChart"></div>
  </dv-border-box-7>
</template>

<script>
import * as echarts from "echarts";
import Axios from "axios";
export default {
  name: "firstRightContents",
  data() {
    return {
      ProductionData: {
        A: 37,
        B: [
          { value: 99, name: "合格率%" },
          { value: 1, name: "不合格率%" },
        ],
      },
      OrderData: {
        code: null,
        name: null,
        planQty: null,
        workingQty: null,
        createdTime: null,
        updatedTime: null,
        okQty: null,
        ngQty: null,
      },
    };
  },
  methods: {
    UpdateData() {
      // var chartDom = document.getElementById("firstRightLeftGauge");
      // var myChart = echarts.init(chartDom);
       var _this = this;

      var chartDom1 = document.getElementById(
        "firstRightRightNightingaleChart"
      );
      var myChart1 = echarts.init(chartDom1);
      var option1;
      //接口
      var url = this.$baseUrl + "order/list-pass-rate";
      Axios.get(url).then(
        (response) => (
          (_this.ProductionData.B = response.data)
        )
      );
      // var option;

      // option = {
      //   tooltip: {
      //     formatter: "{a} <br/>{b} : {c}%",
      //   },
      //   title: {
      //     text: "订单完成度",
      //     textStyle: {
      //       color: "white",
      //     },
      //     left: "center",
      //   },

      //   series: [
      //     {
      //       axisLine: {
      //         show: true,
      //       },
      //       progress: {
      //         show: true,
      //         itemStyle: {
      //           color: "#34D5AA",
      //         },
      //       },
      //       name: "订单进度",
      //       type: "gauge",
      //       detail: {
      //         formatter: "{value}%",
      //         color: "#34D5AA",
      //       },
      //       data: [
      //         {
      //           value: this.ProductionData.A,
      //           name: "进度",
      //         },
      //       ],
      //     },
      //   ],
      // };

      // option && myChart.setOption(option);

      option1 = {
        title: {
          text: "产品合格率",

          left: "center",
          textStyle: {
            color: "white",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
          textStyle: {
            color: "white",
          },
        },
        series: [
          {
            name: "产品合格统计",
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                formatter: "{b}:{c}%",
                textStyle: {
                  fontSize: 10,
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "15",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: true,
            },
            data: this.ProductionData.B,
          },
        ],
      };

      option1 && myChart1.setOption(option1);
    },
    //接口调用
    async GetData() {
      var _this = this;
      var url = this.$baseUrl + "order/current-order";

      await Axios.get(url).then(
        (response) => (_this.OrderData = response.data)
      );
      _this.OrderData.createdTime = new Date(
        _this.OrderData.createdTime
      ).toLocaleString();
      _this.OrderData.updatedTime = new Date(
        _this.OrderData.updatedTime
      ).toLocaleString();
    },
  },
  mounted() {
    this.UpdateData();

    const { GetData } = this;
    GetData();
setInterval(this.UpdateData, 5000);
    setInterval(this.GetData, 5000);
  },
};
</script>

<style lang="less">
#center-row-up-content {
  width: 100%;
  height: 28%;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;
  margin: 20px;
  display: flex;
  flex-wrap: wrap;
  .right-content-tittle {
    font-size: 20px;
    display: flex;
    font-weight: bold;
    color: white;
    justify-content: center;
    align-items: center;
  }
  // #firstRightLeftGauge {
  //   width: 33%;
  //   height: 100%;
  //   float: left;
  // }
  #firstRightCenterTable {
    width: 50%;
    height: 100%;
    float: left;

    .firstRightCenterTableRow {
      font-size: 20px;
      display: flex;
      font-weight: bold;
      color: white;
      height: 10%;
      margin-top: 3px;
    }
    .firstRightCenterTableRow-2 {
      font-size: 25px;
      display: flex;
      font-weight: bold;
      color: #34d5aa;
      height: 10%;
      margin-top: 3px;
    }
  }
  #firstRightRightNightingaleChart {
    width: 33%;
    height: 100%;
    float: right;
  }
}
</style>
